<!doctype html>
<html>
<head>
    <title>给胖哥的html页面</title>
    <!-- 引入样式，从这来的 https://element.eleme.cn/#/zh-CN/component/installation#cdn -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<!-- 下面的代码来源 -->
<!-- https://element.eleme.cn/#/zh-CN/component/installation#hello-world -->
<body>
<!-- 下面我们Vue实例绑定了 #app，因此在该节点下的内容会被vue加强 -->
<div id="app">
    <!-- el-button 是 elementUI 按钮组件：https://element.eleme.cn/#/zh-CN/component/button -->
    <!-- @click 是 vue 语法：https://cn.vuejs.org/v2/guide/syntax.html#v-on-%E7%BC%A9%E5%86%99 -->
    <!-- "双大括号"写法(“Mustache”语法)文档：https://cn.vuejs.org/v2/guide/syntax.html#%E6%96%87%E6%9C%AC 简单来说就是引用下面 vue 实例data中的属性值 -->
    <el-button @click="openDialog">{{message}}</el-button>
    <!-- el-dialog 是 elementUI 对话框组件：https://element.eleme.cn/#/zh-CN/component/dialog -->
    <el-dialog :visible.sync="visible" title="弹框标题">
        <!-- thymeleaf 基本语法：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects -->
        <!-- 注意thymeleaf渲染优先级比html高,此处从request中获取对应的attribute -->
        <p>[[${paramFromServer}]]</p>
    </el-dialog>
    <!-- 之后要啥组件，去文档里找，然后cv下来就行了 -->
    <!-- https://element.eleme.cn/#/zh-CN/component/installation -->
</div>
</body>
<!-- 从这里复制过来的：https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 注意顺序，elementUI依赖vue，因此需要先引入vue，此处src来源：https://element.eleme.cn/#/zh-CN/component/installation#cdn 注意有版本号区别 -->
<script src="https://unpkg.com/element-ui@2.15.8/lib/index.js"></script>
<script>
    /* 注意此处new出来的vue实例，能实现双向绑定：https://cn.vuejs.org/v2/guide/instance.html */
    new Vue({
        /* 这里是id选择器，所以要加#号 */
        el: '#app',
        /* data里放双向绑定的数据：https://cn.vuejs.org/v2/guide/instance.html#%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95 */
        data() {
            return {
                visible: false,
                /* 在js中获取，也可以用中括号，但需要用''引起来避免编译报错 */
                message: '[[${message}]]'
            }
        },
        /* methods中定义各种方法 */
        methods: {
            openDialog() {
                // 注意此处的this，此处的this是vue实例，而不是el-button
                // 此处修改visible的值，会触发vue实例的视图更新
                this.visible = true;
            }
        }
    })
</script>
</html>